

<template>
  <div>isShow:{{ isShow }}</div>
  <div>名称:{{ name }}</div>
  <div @click="isShow = !isShow">开关</div>
  <son-module v-model="isShow" v-model:name="name"></son-module>
</template>
<script setup lang="ts">
import sonModule from '../components/dialog/index.vue'
const isShow = ref(true)
const name= ref<string>('小满')
// v-module 自定义组件使用
// 主要通过prop emit方式实现
// prop 自动接收prop值 modelValue
//  通过emit update:modelValue 将值传递给父组件


// 多个v-module的绑定

// 使用v - model: [变量名] 如：v - model: name = "name"
//    prop 接收：model: 变量名
//    emit update: 变量名
// const props = defineProps<{
//   modelValue: boolean,
//   name: string
// }>()



// 使用如下：
// const emit = defineEmits(['update:modelValue', 'update:name'])
// const edit = (e: Event) => {
//   const target = e.target as HTMLInputElement
//   emit('update:name', target.value)

// }
</script>

<style></style>